

<script>

import getImageUrl from '@/utils/getImageUrl';

export default {
    name: 'RoomList',
    props: {
        roomType: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            getImageUrl: getImageUrl,
            rooms: [
                {
                    roomID: 1,
                    roomNum: 'S201',
                    roomType: '单人间',
                    roomPrice: 100,
                    roomState: '空闲',
                    roomAvatar: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                    roomDesc: '单人间，位于2楼，可住两人，带独立卫生间。'
                }
            ],
            currentPage: 1,
            pageSizes: [4, 8, 12, 16],
            pageSize: 4,
            total: 0,
        }
    },
    methods: {
        getDataList() {
            let param = {
                pageSize: this.pageSize,
                currentPage: this.currentPage,
                params: {
                    roomType: this.roomType,
                }
            }
            this.$http({
                url: '/room/page',
                method: 'post',
                data: param
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.rooms = data.data.list
                    this.total = data.data.total
                } else {
                    this.rooms = []
                    this.totalPage = 0
                }
            })

        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getDataList()
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.currentPage = 1
            this.getDataList()
        }
    },
    mounted() {
        this.getDataList()
    },
    computed: {
        returnRoomType() {
            return this.roomType;
        }
    },
    watch: {
        returnRoomType(val) {
            this.getDataList();
        }
    }
}
</script>


<template>
    <div class="room">

        <el-space direction="horizontal" wrap>
            <el-card :body-style="{ padding: '0px', width: '300px', height: '500px' }" shadow="never"
                v-for="(item, index) in rooms" :key="index">
                <img :src="getImageUrl(item.roomAvatar)" class="image" />
                <div style="padding: 14px">
                    <div style="font-weight: 600; font-size: 25px; margin-bottom: 5px;">
                        {{ item.roomType }}
                    </div>
                    <div style="color: red;margin-bottom: 5px;font-size: 14px">
                        ￥{{ item.roomPrice }}/晚
                    </div>
                    <div
                        style="line-height: 40px;display: flex;justify-content: space-between; align-items: center;font-weight: 600;">
                        <div>
                            {{ item.roomState }}
                        </div>
                        <div>
                            {{ item.roomNum }}
                        </div>
                    </div>

                    <p style="font-size: 14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{
                        item.roomDesc }}</p>

                    <div class="bottom">
                        <el-button type="primary" round class="button">查看&预定</el-button>
                    </div>
                </div>
            </el-card>

        </el-space>

        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="pageSizes" background
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" class="page-item" />

    </div>
</template>



<style scoped lang="scss">
.room {
    width: 100%;
    height: 100%;
    margin: 10px 50px;

    .image {
        width: 100%;
        display: block;
    }

    .bottom {
        margin-top: 10px;
    }

    .page-item {
        margin-top: 30px;
        margin-bottom: 50px;
        justify-content: center;
        align-items: center;
    }
}
</style>


